今天我們繼續來看<img>其他的屬性~

• loading：定義圖片的加載行為，為提升頁面效能提供選項。常見值包括：

  • lazy：延遲加載圖片，等圖片出現在視口內才加載。
  • eager：立即加載圖片（預設值）。

• srcset：為不同解析度的圖片提供多個選擇，這樣瀏覽器可以根據設備的屏幕密度選擇最合適的圖片，有助於提高圖片加載的效率和顯示質量。

  使用像素寬度指定圖片

  <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg">
  

  • image-400.jpg : 在400像素寬時使用
  • limage-800.jpg : 在800像素寬時使用
  • image-1200.jpg : 適合更大寬度時使用
  • src : 提供一個後備圖片，當srcset的圖片無法加載時使用這張圖片

  使用像素密度指定圖片

  <img srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg">
  

  • 1x : 適合普通屏幕
  • 2x : 適合高像素密度屏幕
  • 3x : 適合更高像素密度屏幕

• sizes：與 srcset 搭配使用，告訴瀏覽器在不同的視窗寬度下應該選擇哪一個 srcset 中的圖片。
  格式

  (sizes條件) 佔據寬度, 佔據寬度
  

  <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" 
   sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
  

  • (max-width: 600px) 100vw : 當視窗寬度小於 600px 時，圖片應該佔據視窗的 100%
  • (max-width: 1200px) 50vw : 當視窗寬度在 600px 到 1200px 之間時，圖片應該佔據視窗的 50%
  • 33vw : 當視窗寬度大於 1200px 時，圖片應該佔據視窗的 33%

• usemap：與 <map> 標籤一起使用，讓圖片變成可點擊的區域映射，通常用於創建圖像地圖。

  <img src="image-map.jpg" alt="地圖" usemap="#map">
  

• ismap：用於將圖片變成伺服器端的映射（需要後端支持），當用戶點擊圖片時，瀏覽器會將點擊的座標傳送給伺服器進行處理。

今天先介紹到這裡，謝謝觀看！